import 'package:flutter/material.dart';
import 'package:myturngame/Theme.dart';
import 'package:myturngame/bean/combat/damage.dart';
import 'package:myturngame/bean/role_in_combat.dart';
import 'package:myturngame/widget/combat/damage_text.dart';

import '../../colors.dart';

/// 战斗中的角色视图
class FightRoleLayout extends StatefulWidget {
  final RoleInCombat? role;

  const FightRoleLayout(this.role, {Key? key}) : super(key: key);

  @override
  State<FightRoleLayout> createState() => _FightRoleLayoutState();
}

class _FightRoleLayoutState extends State<FightRoleLayout>
    with SingleTickerProviderStateMixin {
  //伤害动画
  Offset damageAniStartOffset = const Offset(0, -1);
  Offset damageAniEndOffset = const Offset(0, -2);

  //角色动画
  late final AnimationController _roleController;

  @override
  void initState() {
    super.initState();

    _initRoleController();
  }

  void _initRoleController() {
    _roleController = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _roleController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var role = widget.role;
    if (role == null) {
      return Container(
        width: 60,
        height: 60,
        // decoration: const BoxDecoration(color: Colors.grey),
      );
    } else {
      var targetOffset = role.targetOffset;
      if (targetOffset != null) {
        _roleController.addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            _roleController.reverse();
          }
        });
        _roleController.forward();

        ///角色动画
        final roleOffsetAnimation =
            Tween<Offset>(begin: const Offset(0, 0), end: targetOffset)
                .animate(_roleController);
        // final roleScaleAnimation =
        //     Tween(begin: 1.0, end: 2.0).animate(_roleController);
        // debugPrint("dy:${roleOffsetAnimation.value.dy}");
        return SlideTransition(
            position: roleOffsetAnimation, child: layoutRole(role));
        // return Transform.scale(
        //   scale: roleScaleAnimation.value,
        //   child: layoutRole(role),
        // );
      } else {
        return layoutRole(role);
      }
    }
  }

  Widget layoutRole(RoleInCombat role) {
    List<Widget> children = [];

    /// Hp动画
    var damageListToShow = role.damageListToShow;
    if (damageListToShow.isNotEmpty) {
      var index = 0.0;
      children.add(Align(
          alignment: Alignment.topCenter,
          child: Stack(
            alignment: Alignment.topCenter,
            children: damageListToShow
                .map((e) => Positioned(
                    top: index += 2,
                    child: DamageText(
                      e,
                      key: Key(e.hashCode.toString()),
                    )))
                .toList(),
          )));
    }

    //显示
    children.add(Align(
        alignment: Alignment.center,
        child: Text(role.role.name, style: textStyle2)));

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
              border: Border.all(), borderRadius: BorderRadius.circular(10)),
          alignment: Alignment.center,
          child: Stack(
            children: children,
          ),
        ),
        const Divider(height: 1, color: Colors.transparent),
        Container(
          width: 55,
          height: 10,
          decoration: BoxDecoration(
              border: Border.all()),
          child: Stack(
            children: [
              LinearProgressIndicator(
                value: role.role.hp / role.role.finalMaxHp(),
                color: hpColor,
                minHeight: 10,
              ),
              Align(
                alignment: Alignment.center,
                child: Text("${role.role.hp}/${role.role.finalMaxHp()}",
                    style: textStyleInHpProgress),
              )
            ],
          ),
        )
      ],
    );
  }
}
